<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
</head>
<body>
<div class="layui-form timo-compile">
    <form th:action="@{/message/messageInfo/editMessageInfo}">
        <div class="timo-detail-page">
            <div class="timo-detail-title">基本信息</div>
            <!--        <table class="layui-table timo-detail-table">-->
            <table class="layui-table">
                <colgroup>
                    <col width="100px"><col>
                    <col width="100px"><col>
                </colgroup>
                <tbody>
                <input type="hidden" name="id" th:if="${messageInfo}" th:value="${messageInfo.id}">
                <tr>
                    <th>标题</th>
                    <td>
                        <input type="text" class="layui-input" name="title" th:value="${messageInfo.title}">
                    </td>
                </tr>
                <tr>
                    <th>开始时间</th>
                    <td>
                        <input class="layui-input test-item" type="text" lay-verify="date" name="startTime" id="startTime" placeholder="开始时间" th:value="${#dates.format(messageInfo.startTime, 'yyyy-MM-dd HH:mm:ss')}">
                    </td>
                </tr>
                <tr>
                    <th>帖子描述</th>
                    <td>
                        <input type="text" class="layui-input" name="details" th:value="${messageInfo.details}">
                    </td>
                </tr>
                <tr>
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>首图</legend>
                    </fieldset>

                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="first">上传图片</button>
                        <input type="hidden" name="logo" id="logo" th:value="${messageInfo.logo}">
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="demo1" style="width: 92px; height: 92px" th:src="${messageInfo.logo}">
                            <p id="demoText"></p>
                        </div>
                    </div>


                </tr>
                <tr>
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>内容图片</legend>
                    </fieldset>
                    <input type="hidden" name="nineImgs" id="nineImgs" th:if="${messageInfo}" th:value="${messageInfo.imgs}">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="ninePic">多图片上传</button>
                        <button type="button" class="layui-btn" id="cleanNinePic">清空图片</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list" id="demo2"></div>
                        </blockquote>
                    </div>
                </tr>
                </tbody>
            </table>
            <div class="layui-form-item timo-finally">
                <button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 保存</button>
                <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
            </div>
        </div>
    </form>
</div>
<script th:replace="/common/agenttemplate :: agentscript"></script>
<script>
    layui.use(['upload','laydate'],function () {
        var laydate = layui.laydate;
        var $ = layui.jquery
            ,upload = layui.upload;
        ninePic();
        $('#cleanNinePic').on('click', function(){
            $('#demo2').children().remove();
            $('#nineImgs').val('');
        });
        //处理多图回显
        function ninePic(){
            var nineImgsStr=$('#nineImgs').val();
            console.log("nineImgsStr : "+nineImgsStr);
            var nineImgsArr=nineImgsStr.split(",");
            for(var i=0;i<nineImgsArr.length;i++){
                $('#demo2').append('<img style="width: 92px; height: 92px" src="'+ nineImgsArr[i] +'" alt="'+ nineImgsArr[i] +'" class="layui-upload-img">')
            }
        }

        lay('.test-item').each(function() {
            laydate.render({
                type: 'datetime',
                elem : this
            });

        });
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#first'
            ,url: '/upload/picture' //改成您自己的上传接口
            ,field: 'picture'
            ,exts: 'jpg|png|gif|jpeg'
            ,auto: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code !== 200){
                    return layer.msg('上传失败');
                }
                //上传成功
                $("#logo").val(res.data.url);
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //多图片上传
        upload.render({
            elem: '#ninePic'
            ,url: '/upload/picture' //改成您自己的上传接口
            ,field: 'picture'
            ,exts: 'jpg|png|gif|jpeg'
            ,auto: true
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img style="width: 92px; height: 92px" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code !== 200){
                    return layer.msg('上传失败');
                }
                var imgs = $("#nineImgs").val();
                console.log("追加前"+imgs);
                imgs=imgs+res.data.url+",";
                $("#nineImgs").val(imgs);
                console.log("追加后"+imgs);
            }
        });
        $('#createWeb').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    });

</script>
</body>
</html>